<template>
  <div>
    <el-container>
      <!-- 侧边 -->
      <el-aside width="240px">
        <div class="nei">
          <h2>云音乐特色榜</h2>
          <ul>
            <li
              v-for="(item,index) in toplist"
              :key="index"
            >
              <div class="item">
                <div class="left">
                  <a
                    href="#"
                    @click.prevent="getplDetail(index,item.id)"
                  >
                    <img v-lazy="item.coverImgUrl">
                  </a>
                </div>
                <p class="name">{{item.name}}</p>
                <p class="listinfo">{{item.updateFrequency}}</p>
              </div>
            </li>
          </ul>
        </div>
      </el-aside>
      <!-- 主体 -->
      <el-main>
        <div class="listinfo2">
          <div class="infopic">
            <img v-lazy="detaillist.coverImgUrl">
          </div>
          <div class="infor">
            <h2>{{detaillist.name}}</h2>
            <div class="update">
              <i class="iconfont icon-time1"></i>
              <span>最近更新：{{detaillist.updateTime | dateFormat}}</span>
              <!-- <span class="numup">({{detaillist.updateFrequency}})</span> -->
            </div>
            <div class="btns">
              <a
                href="#"
                class="bo"
              ><i class="iconfont icon-bofang"></i>播放</a>
              <a
                href="#"
                class="jia"
              ><i class="iconfont icon-hao"></i></a>
              <a href="#"><i class="iconfont icon-tianjiawenjianjia"></i>{{detaillist.subscribedCount}}</a>
              <a href="#"><i class="iconfont icon-fenxiang"></i>10899</a>
              <a href="#"><i class="iconfont icon-xiazai1"></i>下载</a>
              <a href="#"><i class="iconfont icon-pinglun"></i>207992</a>
            </div>
          </div>
        </div>
        <div class="songlists">
          <!-- 标题 -->
          <div class="utit">
            <h3>歌曲列表</h3>
            <span class="sub">{{songslist.length}}首歌</span>
            <span class="more">播放：<span class="numplay">{{detaillist.playCount}}</span>次</span>
          </div>
          <!-- 100个歌曲列表 -->
          <div class="songlist">
            <table class="mtable">
              <thead>
                <tr>
                  <th class="first"></th>
                  <th class="biao">标题</th>
                  <th class="time">时长</th>
                  <th class="artister">歌手</th>
                </tr>
              </thead>
              <tbody>
                <tr
                  v-for="(item,index) in detaillist.tracks"
                  :key="index"
                  class="trsa"
                >
                  <td class="one">
                    <div class="hd">
                      <span class="num">{{index+1}}</span>
                      <div class="rk">-0</div>
                    </div>
                  </td>
                  <td class="music">
                    <div
                      class="picm"
                      v-show="index<3"
                    >
                      <img v-lazy="item.al.picUrl">
                    </div>
                    <div class="txt">
                      <!-- 播放 -->
                      <i
                        class="iconfont icon-bofang"
                        @click="bofangmusic(item.id)"
                      ></i>
                      <span class="bgs">
                        <a
                          href="#"
                          @click.prevent="goSong(item.id)"
                        >{{item.name}}</a>
                        <!-- <span>-(遇上清空)</span> -->
                      </span>

                    </div>
                  </td>
                  <td class="timelong">
                    <div class="tim">{{item.dt | dateFormat2}}</div>
                    <div class="td iconfa">
                      <div class="boxaaa icons">
                        <a
                          href="#"
                          class="icn"
                        ><i class="iconfont icon-hao"></i></a>
                        <a
                          href="#"
                          class="icn"
                        ><i class="iconfont icon-tianjiawenjianjia"></i></a>
                        <a
                          href="#"
                          class="icn"
                        ><i class="iconfont icon-fenxiang"></i></a>
                        <a
                          href="#"
                          class="icn"
                        ><i class="iconfont icon-xiazai1"></i></a>
                      </div>

                    </div>

                  </td>
                  <td class="artister f-thide"><a
                      v-for="(i,index2) in item.ar"
                      :key="index2"
                      @click.prevent="goartistdetail(i.id)"
                    >{{i.name}}<span v-show="item.ar.length>1">/</span></a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <!-- 评论——————因为榜单也是歌单，所以调用歌单评论接口 -->
          <!-- <div class="n-cmt">
            <div class="commo">
              <div class="comtit">
                <h3>评论</h3>
                <span>共{{comcount}}条评论</span>
              </div>
              <div class="commain">
                <div class="iptarea">
                  <div class="head">
                    <img src="../../assets/image/default_avatar.jpg">
                  </div>
                  <div class="hflag">
                    <div class="shuqu">
                      <textarea
                        name=""
                        id=""
                        cols="85"
                        rows="10"
                        placeholder="评论"
                        v-model="comtext"
                      ></textarea>
                    </div>
                    <div class="combtns">
                      <i class="iconfont icon-xiaolian"></i>
                      <i class="iconfont icon-aite"></i>
                      <a href="#">评论</a>
                    </div>
                    <div class="corr"></div>
                  </div>
                </div>
                <div class="cmmts">
                  <h3 v-show="hotcomnum!==0">精彩评论</h3>
                  <div
                    class="acom"
                    v-for="(item,index2) in cominfoshot"
                    :key="index2"
                  >
                    <div class="head">
                      <img v-lazy="item.user.avatarUrl">
                    </div>
                    <div class="cntwrap">
                      <div class="usersay">
                        <a href="#">{{item.user.nickname}}</a>
                        <img src="../../assets/image/vip3.png">
                        “{{item.content}}”
                      </div>
                      <div class="myact">
                        <div class="time">{{item.time}}</div>
                        <a
                          href="#"
                          class="zana"
                        ><i class="iconfont icon-zan"></i>
                          ({{item.likedCount}})</a>
                        <span>|</span>
                        <a href="#">回复</a>
                      </div>
                    </div>
                  </div>
                  <div class="hui">
                    <div class="iner">
                      <div class="u-txtwrap">
                        <textarea
                          name=""
                          class="txthui"
                          cols="75"
                          rows="2"
                        ></textarea>
                      </div>
                      <div class="combtnss">
                        <i class="iconfont icon-lianxiaolianmanyi-"></i>
                        <i class="iconfont icon-aite1"></i>
                        <a
                          href="#"
                          class="huifu"
                        >回复</a>
                        <span class="xz">134</span>
                      </div>
                    </div>
                  </div>
                  <h3 v-show="newcomnum!==0">最新评论</h3>
                  <div
                    class="acom"
                    v-for="(item,index3) in cominfos"
                    :key="'3'+index3"
                  >
                    <div class="head">
                      <img v-lazy="item.user.avatarUrl">
                    </div>
                    <div class="cntwrap">
                      <div class="usersay">
                        <a href="#">{{item.user.nickname}}</a>
                        <img src="../../assets/image/vip3.png">
                        “{{item.content}}”
                      </div>
                      <div class="myact">
                        <div class="time">{{item.time}}</div>
                        <a
                          href="#"
                          class="zana"
                        ><i class="iconfont icon-zan"></i>({{item.likedCount}})</a>
                        <span>|</span>
                        <a href="#">回复</a>
                      </div>
                    </div>

                    <div class="hui">
                      <div class="iner">
                        <div class="u-txtwrap">
                          <textarea
                            name=""
                            class="txthui"
                            cols="75"
                            rows="2"
                          ></textarea>
                        </div>
                        <div class="combtnss">
                          <i class="iconfont icon-lianxiaolianmanyi-"></i>
                          <i class="iconfont icon-aite1"></i>
                          <a
                            href="#"
                            class="huifu"
                          >回复</a>
                          <span class="xz">134</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div> -->
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import axios from 'axios'
import moment from 'moment'
import bus from '../../../eventbus'
import { mapMutations } from 'vuex'
export default {
  data () {
    return {
      // 获取榜单数据（歌曲）
      songs: [],
      bangid: 19723756,
      // 排行榜数据
      toplist: [],
      // 排行榜详情
      detaillist: {},
      songslist: [],
      // 评论
      banginfo: {
        data: {
          total: 0,
          hotComments: 0,
          comments: 0,
        }
      },
      comtext: '',
      cominfoshot: [],
      cominfos: [],
      comcount: 0,
      newcomnum: 0,
      hotcomnum: 0,
      pldetail: [
        {
          creator: {
            avatarUrl: '',
            nickname: ''
          }
        }
      ],
      now: 0
    }
  },
  created () {
    this.getTopList();
    this.getplDetail(this.now, this.bangid);
  },
  methods: {
    ...mapMutations(['goSong']),
    async getTopList () {
      this.bangid = this.$route.query.id;
      let res = await axios.get('https://autumnfish.cn//toplist/');
      this.toplist = res.data.list;

    },
    // 获取榜单数据
    // console.log('ranking', '因为排行榜也是歌单，想通过eventbus将this.bangid传递给playlistdetail，在playlistdetail中获取榜单数据，但$on一直未接收到数据，有待改进。。。。')
    // --与playlistdetail重复的部分----------------------------------------
    async getplDetail (i, id) {
      this.bangid = id;
      // 加了跳转变得很卡，不知道为啥
      // this.$router.push({ name: 'toplist', params: { id: id } })
      let res = await axios.get('https://autumnfish.cn//playlist/detail?id=' + this.bangid)
      this.detaillist = res.data.playlist
      // console.log(res)
      this.songslist = res.data.privileges
    },
    // 获取评论
    // async getcoms () {
    //   let res = await axios.get('https://autumnfish.cn//comment/playlist?id=' + this.plid)
    //   this.comcount = res.data.total
    //   this.cominfoshot = res.data.hotComments
    //   this.cominfos = res.data.comments
    //   this.newcomnum = res.data.comments.length
    //   this.hotcomnum = res.data.hotComments.length
    //   // bus.$emit('bangInfo', res)
    // },
    // --与playlistdetail重复的部分------------------END----------------------
    // 播放音乐
    bofangmusic (id) {
      bus.$emit('musicid', id)
    },
    // 歌手详情
    goartistdetail (id) {
      this.$router.push({ path: '/artist', query: { id: id } })
    }
  }
}
</script>

<style lang="less" scoped>
.el-container {
  width: 980px;
  margin: 0 auto;
  .el-aside {
    border: 1px solid #aeaeae;
    .nei {
      margin-top: 40px;
      h2 {
        padding: 0 10px 12px 15px;
        font-size: 14px;
      }
      ul {
        li {
          list-style: none;
          padding: 10px 0 10px 20px;
          height: 42px;
          cursor: pointer;
          .item {
            padding-left: 50px;
            .left {
              display: inline;
              float: left;
              margin-left: -50px;
              overflow: hidden;
              width: 40px;
              a {
                display: block;
                position: relative;
                width: 40px;
                height: 40px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
            }
            p {
              font-size: 12px;
            }
            .name {
              width: 150px;
              overflow: hidden;
              margin-top: 2px;
              margin-bottom: 8px;
            }
            .listinfo {
              color: #999;
            }
          }
        }
        li:hover {
          background-color: #e6e6e6;
        }
      }
    }
  }
  .el-main {
    a {
      text-decoration: none;
      color: #000;
    }
    .listinfo2 {
      padding: 40px;
      display: flex;
      justify-content: left;
      align-items: center;
      .infopic {
        margin-right: 40px;
        border: 1px solid #e7e7e7;
        img {
          width: 150px;
          height: 150px;
          padding: 3px;
        }
      }
      .infor {
        h2 {
          font-size: 20px;
          font-weight: 500;
          margin: 16px 0 4px;
          color: #333;
        }
        .update {
          margin: 0 0 20px;
          line-height: 35px;
          font-size: 12px;
          i {
            margin: 9px 0 0 3px;
          }
          span {
            color: #666;
            margin-left: 5px;
          }
          .numup {
            color: #999;
          }
        }
        .btns {
          margin-bottom: 25px;
          margin-right: -10px;
          a {
            color: #333;
            display: inline-block;
            margin-right: 6px;
            padding: 0 5px;
            height: 31px;
            line-height: 30px;
            min-width: 23px;
            border: 1px solid #f2f2f2;
            background: linear-gradient(#fefefe, #f2f2f2);
            border-radius: 5px;
            font-size: 12px;
            text-align: center;
            border: 1px solid #999;
            box-shadow: 3px 2px 2px #888888;
            .iconfont {
              font-size: 13px;
              margin-right: 5px;
            }
          }
          .bo {
            color: #fff;
            background: linear-gradient(#4392db, #4190d9);
            margin: 0;
            border: none;
            border-radius: 5px 0 0 5px;
            border-right: 1px solid #666;
          }
          .jia {
            color: #fff;
            background: linear-gradient(#4392db, #4190d9);
            border-radius: 0 5px 5px 0;
            border: none;
          }
        }
      }
    }
    .songlists {
      padding: 0 30px 40px 40px;
      // 标题
      .utit {
        height: 33px;
        border-bottom: 2px solid #c20c0c;
        h3 {
          font-size: 20px;
          line-height: 28px;
          font-weight: normal;
          float: left;
        }
        .sub {
          margin: 9px 0 0 20px;
          float: left;
          color: #666;
          font-size: 12px;
        }
        .more {
          margin-top: 5px;
          color: #666;
          float: right;
          font-size: 12px;
          .numplay {
            font-weight: 700;
            color: #c20c0c;
          }
        }
      }
      // 歌曲列表
      .songlist {
        .mtable {
          width: 100%;
          border: 1px solid #d9d9d9;
          border-collapse: collapse;
          border-spacing: 0;
          table-layout: fixed;
          thead {
            border-bottom: 1px solid #999;
            tr {
              th {
                height: 38px;
                background-color: #f7f7f7;
                background-position: 0 0;
                background-repeat: repeat-x;
                vertical-align: top;
                text-align: left;
                font-weight: normal;
                font-size: 12px;
                color: #666;
                border-right: 1px solid #999;
                line-height: 38px;
                padding: 0px 10px;
              }
              .first {
                width: 59px;
              }
              .biao {
                width: 310px;
              }
              .time {
                width: 73px;
              }
              .artister {
              }
            }
          }
          tbody {
            tr {
              td {
                padding: 6px 10px;
                line-height: 18px;
                text-align: left;
                font-size: 12px;
                color: #999;
              }
              .one {
                .hd {
                  height: 18px;
                  .num {
                    float: left;
                    width: 25px;
                    margin-left: 0;
                    text-align: center;
                  }
                  .rk {
                    float: right;
                    width: 32px;
                    margin-right: -5px;
                    text-align: center;
                  }
                }
              }
              .music {
                padding: 10px;
                display: flex;
                justify-content: left;
                align-items: center;
                .picm {
                  width: 50px;
                  height: 50px;
                  margin-right: 14px;
                  cursor: pointer;
                  img {
                    width: 100%;
                    height: 100%;
                  }
                }
                .txt {
                  font-size: 12px;
                  color: #999;
                  .iconfont {
                    font-size: 16px;
                  }
                  .bgs {
                    margin-left: 5px;
                    a {
                      color: #333;
                    }
                    a:hover {
                      text-decoration: underline;
                    }
                  }
                }
              }
              .timelong {
                color: #333;
                .tim {
                  display: block;
                }
                .icn {
                  margin-right: 5px;
                  margin-bottom: 3px;
                  color: #666;
                  .iconfont {
                    font-size: 15px;
                  }
                }
                .icons {
                  display: none;
                }
              }
              .artister {
                color: #333;
                cursor: pointer;
              }
              .artister:hover {
                text-decoration: underline;
              }
            }
            tr:hover {
              .timelong .icons {
                display: block;
              }
              .timelong .tim {
                display: none;
              }
            }
            tr:nth-child(odd) {
              background-color: #f7f7f7;
            }
          }
        }
      }
      // 评论
      .n-cmt {
        .commo {
          margin-top: 40px;
          .comtit {
            height: 33px;
            border-bottom: 2px solid #c20c0c;
            display: flex;
            justify-content: left;
            align-items: center;
            h3 {
              font-size: 20px;
              font-weight: normal;
            }
            span {
              margin-left: 20px;
              color: #666;
              font-size: 12px;
            }
          }
          .commain {
            // 评论输入框
            .iptarea {
              margin-bottom: 20px;
              display: flex;
              justify-content: left;
              align-items: center;
              margin-top: 20px;
              .head {
                width: 50px;
                height: 50px;
                margin-right: 20px;
                margin-bottom: 35px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              .hflag {
                .shuqu {
                  padding-right: 14px;
                  textarea {
                    height: 50px;
                    display: block;
                    padding: 5px 6px 6px;
                    border: 1px solid #cdcdcd;
                    border-radius: 2px;
                    line-height: 19px;
                    box-sizing: content-box;
                    resize: none;
                    overflow: auto;
                    font-size: 12px;
                    color: #333;
                  }
                }
                .combtns {
                  padding: 0 10px;
                  padding-top: 10px;
                  .iconfont {
                    float: left;
                    margin: 0px 10px 0 0;
                    cursor: pointer;
                  }
                  a {
                    float: right;
                    font-size: 12px;
                    display: inline-block;
                    width: 46px;
                    height: 25px;
                    color: #fff;
                    background-color: #4391da;
                    text-align: center;
                    line-height: 25px;
                  }
                }
              }
            }
            // 评论区
            .cmmts {
              position: relative;
              overflow: hidden;
              h3 {
                height: 20px;
                border-bottom: 1px solid #cfcfcf;
                font-weight: normal;
                font-size: 14px;
              }
              .acom {
                // height: 70px;
                // position: relative;
                padding: 15px 0;
                border-top: 1px solid #ccc;
                display: flex;
                justify-content: left;
                // align-items: center;
                .head {
                  width: 50px;
                  height: 50px;
                  margin-right: 10px;
                  img {
                    width: 100%;
                    height: 100%;
                  }
                }
                .cntwrap {
                  width: 100%;
                  .usersay {
                    width: 100%;
                    overflow: hidden;
                    line-height: 20px;
                    font-size: 12px;
                    color: #333;
                    a {
                      font-size: 12px;
                      margin-right: 5px;
                      color: #0c73c2;
                    }
                    a:hover {
                      text-decoration: underline;
                    }
                    img {
                      height: 12px;
                      margin-right: 5px;
                    }
                  }
                  .myact {
                    margin-top: 15px;
                    text-align: right;
                    .time {
                      font-size: 12px;
                      float: left;
                      margin: 0 !important;
                      color: #999;
                    }
                    a {
                      font-size: 12px;
                      color: #999;
                    }
                    span {
                      margin: 0 8px;
                      color: #ccc;
                    }
                    .iconfont {
                      margin-right: 5px;
                      vertical-align: -2px;
                      font-size: 12px;
                      color: skyblue;
                    }
                  }
                }
              }
              .hui {
                position: absolute;
                left: 0px;
                top: 0px;
                display: none;
                margin-left: 60px;
                margin-bottom: 15px;
                border: 1px solid #d9d9d9;
                border-radius: 2px;
                .iner {
                  padding: 15px;
                  background: #f8f8f8;
                  border: 1px solid #fcfcfc;
                  border-radius: 2px;
                  .u-txtwrap {
                    padding-right: 14px;
                    .txthui {
                      margin: 0;
                      padding: 5px 6px 6px;
                      border: 1px solid #cdcdcd;
                      border-radius: 2px;
                      line-height: 19px;
                      box-sizing: content-box;
                      height: 20px;
                    }
                  }
                  .combtnss {
                    width: 530px;
                    height: 22px;
                    padding-top: 10px;
                    .iconfont {
                      float: left;
                      margin: 0px 10px 0 0;
                      cursor: pointer;
                      font-size: 20px;
                    }
                    .huifu {
                      text-decoration: none;
                      display: inline-block;
                      width: 46px;
                      height: 25px;
                      float: right;
                      background-color: #3282ce;
                      color: #fff;
                      text-align: center;
                      line-height: 25px;
                      font-size: 12px;
                    }
                    .xz {
                      font-size: 12px;
                      float: right;
                      margin-right: 10px;
                      line-height: 25px;
                      color: #999;
                    }
                  }
                }
              }
            }
            // 页数
            .j-flag {
            }
          }
        }
      }
    }
  }
}
</style>
